<template>
    <div class="iphone">
        <div class="iphone-body" style="background: #F2F6FC; overflow: hidden">
            <el-scrollbar style="height: 100%">
                <div>
                    <div>
                        <el-carousel height="324px" :interval="2000" arrow="always">
                            <el-carousel-item v-for="item in form.imgUrlList" :key="item">
                                <el-image    style="width: 100%; height: 324px" :src="item" fit="fit">
                                    <div slot="error" class="image-slot">
                                        <i class="el-icon-picture-outline"></i>
                                    </div>
                                </el-image>
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                    <div style="background-color: #ffffff">
                        <el-row>
                            <el-col :span="16" style="margin-right: 12px">
                                <div class="context-title">
                                    {{form.title}}
                                </div>
                            </el-col>
                            <el-col :span="3">
                                <div style="text-align: center; padding-top: 8px">
                                    <van-icon name="like-o" color="red"/>
                                    <span style="display: block; font-size: 12px; color: red; margin:0 auto;">收藏</span>
                                </div>

                            </el-col>
                            <el-col :span="3">
                                <div style="text-align: center; padding-top: 8px">
                                    <i style="color: red;" class="el-icon-share"></i>
                                    <span style="display: block; font-size: 13px; color:red; margin:0 auto;">分享</span>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20" style="  padding: 11px;" >
                            <el-col :span="4" style="font-size: 18px;color: red">￥{{form.price}}</el-col>
                            <el-col :span="3" style="font-size: 14px;color: gainsboro;text-decoration:line-through">￥{{form.oldPrice}}</el-col>
                        </el-row>
                    </div>
                    <div>
                        <el-row style="margin-top: 10px; padding: 5px; background: white">
                            <van-cell  is-link>
                                <template #title>
                                   <span style="font-size: 16px;font-weight: 500">已选 X3</span>
                                </template>
                            </van-cell>
                        </el-row>
                        <el-row style="margin-top: 10px; padding: 20px; background: white">发货 江西吉安 | 快递 0.00</el-row>
                        <el-row style="margin-top: 10px; padding: 20px; background: white"><i type="info"
                                                                                              class="el-icon-truck"
                                                                                              style="margin-right: 10px"></i>市区城区非节假日1-2小时送达
                        </el-row>
                        <el-row style="margin-top: 10px; padding: 5px; background: white">
                            <van-cell title="评论" is-link value="150条评论">
                                <template #title>
                                    <span style="font-size: 16px;font-weight: 500">评论</span>
                                </template>
                            </van-cell>
                        </el-row>
                        <el-row style=" text-align: center; margin-top: 10px; padding: 20px; background: white">
                            商品详情
                        </el-row>
                    </div>
                    <div class="ql-container ql-snow">
                        <div class="ql-editor">
                            <div style="background-color: #ffffff" v-html="form.description"></div>
                        </div>
                    </div>
                </div>
            </el-scrollbar>

        </div>
    </div>
</template>


<script>
    import 'quill/dist/quill.core.css'
    import 'quill/dist/quill.snow.css'
    import 'quill/dist/quill.bubble.css'

    export default {
        name: "flowerIphone",
        data() {
            return {
                appData: []
            };
        },
        props: ["form"],
        watch:{
            form(val,oval){
                this.form=val
            }
        }
    };
</script>

<style scoped>
    .iphone {
        position: relative;
        border-radius: 36px;
        width: 363px;
        height: 700px;
        background-image: url("../../assets/img/iphone.jpg");
        background-size: 100% 100%;
        padding-left: 11px;
        padding-right: 13px;
        padding-top: 37px;
    }

    .iphone-body {
        width: 100%;
        height: 690px;
        border-bottom-left-radius: 36px;
        border-bottom-right-radius: 36px;
    }
</style>
<style>
    .ql-editor {
        padding: 0px !important;
    }

    .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
        padding-left: 1.5em !important;
    }

    .context-title {
        padding-left: 8px;
        padding-top: 8px;
        letter-spacing: 2px;
        width: 100%;
        font-size: 16px;
        font-weight: 700;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>